<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/public.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/common.js"></script>
<%@ include file="/commons/validation.jsp" %>
<%@ include file="/commons/dateTime.jsp" %>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/ajaxException.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/div/common.js"></script>
<link href="${ctx}/styles/aux_window.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
	var windowObj = null;
	var inputCss = " inputtext "
	var validationCSS = " required integer-decimal-range-13-2 float-right "
	var validationMax = " max-value-"
/**********房号相关操作*******************/
	/**
	*   打开选择房屋页面
	*/
	function openSelectHouse(){
		var url = "${ctx}/customer_chooseSingleHouseAction.do?method=chooseBuildingMain&parentFrameId=byUserFrame";
		top.windowOpen(url, "selectHouse", "${key.charge_meterdata_byuser_selectHouse}", 500,800,true,"selectHouseFrame");
	}
	/**
	 * 通过选房间的功能点获取房号、房屋ID后,需要设置房号输入框、水、电表上次读数
	 */
	function setHouseInfo(_houseId,_houseNumber){
		$("houseId").value = _houseId;
		$("houseNumber").value = _houseNumber;
		$("houseNumber").fireEvent("onblur");//触发失去焦点事件,来触发验证
	}
	/**
	 *  当输入一次正确的房号 带出相关信息后 ,再输入一次错误的房号, 需要清空之前的填充的数据
	 */
	function clearMeterDataInfo(){
			$("houseId").value = "";
			$("ownerName").innerText = "";
			$("owners").value = "";
			$("shui_showLastReading").innerText = "";
			$("shui_lastReading").value = "";
			$("dian_showLastReading").innerText = "";
			$("dian_lastReading").value = "";

	}
	/**
	 *  设置走表上次读数信息
	 */
	function setLastMeterDataInfo(){
		//在页面保存数据前,先清空数据
		clearMeterDataInfo();

		var url = "${ctx}/charge_meterDataRegisterAction.do?method=getMeterDataByHouseNum";
		var param = "houseNumber=" + $("houseNumber").value;
		sendAjaxRequest(url,param,setMeterInfo);
		//设置走表信息
		function setMeterInfo(result){
			var obj = eval("(" + result.responseText + ")");
			$("houseId").value = obj.houseId;
			$("ownerName").innerText = obj.owner;
			$("owners").value = obj.owner;

			$("shui_showLastReading").innerText = obj.type001.lastReading;
			$("shui_lastReading").value = obj.type001.lastReading;

			var shuicss = inputCss + validationCSS  + validationMax +  obj.type001.maxSize ;

			Validation.changeElmValidate("shui_thisReading",shuicss);

			$("dian_showLastReading").innerText = obj.type002.lastReading;
			$("dian_lastReading").value = obj.type002.lastReading;

			var dianCss = inputCss + validationCSS + validationMax + obj.type002.maxSize;
			Validation.changeElmValidate("dian_thisReading",dianCss);
		}
	}
/************end***********************/

/*********表单操作************/
	var formData = "";
	function mysubmit(){
		var url = "${ctx}/charge_meterDataRegisterAction.do?method=addByUser";
		var param = ${"byUserForm"}.serialize();
		windowObj.ajaxSubmit(url,param,submitCallBack);

		function submitCallBack(result){
			findFrame("main").reloadFramWithoutCondition();
			windowClose();
		}
	}
	//保存及新增
	function sumitAndNew(){
		var url = "${ctx}/charge_meterDataRegisterAction.do?method=addByUser";
		var param = ${"byUserForm"}.serialize();
		windowObj.saveAndAdd(url,param,addAndNewCallBack);

		function addAndNewCallBack(){
			findFrame("main").reloadFramWithoutCondition();
			window.location.href = "${ctx}/charge_meterDataRegisterAction.do?method=initByUser&houseId=" + $("houseId").value;
			return false;
		}
	}
	function myWindowClose(){
		var currentFormData = formSerialize();
		windowObj.winClose(currentFormData == formData,"mysubmit","byUserFrame");
	}
	//获取表单用户可填入的字段,在关闭按钮时,要求验证数据是否有改动
	//这里直接获取可填入字段值
	function formSerialize(){
		return $("byUserForm").houseNumber.value +
			  $("byUserForm").shui_thisReading.value +
			  $("byUserForm").dian_thisReading.value +
			  $("byUserForm").recordTime.value;
	}
	/**********end***************/

	var shui_LastThisValue = null;
	function thisShuiMeterHandle(thisValue){
		if(thisValue == null || thisValue == "") return;
		if(shui_LastThisValue == thisValue) return;
		lastThisValue = thisValue;

		if( parseFloat( $("shui_lastReading").value) > parseFloat(thisValue) )
			Alert("${key.charge_meterdata_byuser_water_less_last}");
	}

	var dian_LastThisValue = null;
	function thisDianMeterHandle(thisValue){
		if(thisValue == null || thisValue == "") return;
		if(dian_LastThisValue == thisValue) return;
		dian_LastThisValue = thisValue;

		if( parseFloat( $("dian_lastReading").value) > parseFloat(thisValue) )
			Alert("${key.charge_meterdata_byuser_ammeter_less_last}");
	}

	function init(){
		windowObj =new WindowObject("byUserForm",["btn1_42","btn1_22","btn1_32"]);
		formData = formSerialize();
		<c:if test="${not empty houseVO}">
			setHouseInfo("${houseVO.keyword}","${houseVO.houseNumber}");
			$("houseNumber").focus();
			$("houseNumber").blur();
		</c:if>
	}
</script>

</head>

<body onload="init();">
<form id="byUserForm" action="" class="required-validate">
<input type="hidden" id="houseId" name="houseId" value="">
<input type="hidden" id="owners" name="owners" value="">
<input type="hidden" id="shui_lastReading" name="shui_lastReading" value="">
<input type="hidden" id="dian_lastReading" name="dian_lastReading" value="">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="window_head_outBg">
	    <table border="0" cellpadding="0" cellspacing="0">
	      <tr>
	        <td width="121">
	        	<img src="${ctx}/images/ico_Advance.gif" width="16" height="16" align="absmiddle">
	        	<span class="window_head_intext">${key.charge_meterdata_byuser}</span>
	        </td>
	      </tr>
	    </table>
    </td>
  </tr>
  <tr>
    <td class="aux_header_line_1"></td>
  </tr>
  <tr>
    <td class="aux_header_line_2"></td>
  </tr>
  <tr>
    <td class="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="aux_outtable_color">
        <table width="100%" border="0" cellpadding="0" cellspacing="1" class="aux_intable_color">
          <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_houseNumber }：</td>
            <td class="aux_intable_require">
	           <table border="0" cellspacing="0" cellpadding="0">
	             <tr>
	               <td >
	               		<input name="houseNumber"
	               			   maxlength="36"
	               			   type="text"
	               			   class="inputtext required validate-ajax"
	               			   validateUrl="${ctx}/charge_meterDataRegisterAction.do?method=validateHouseNumber"
	               			   onSuccess="setLastMeterDataInfo"
	               			   onFailure="clearMeterDataInfo"
	               			   afterInsert="selectHouseImg"
	               			   value=""
	               			   size="16"></td>
	               <td width="4">&nbsp;</td>
	               <td >
	               		<a href="#"  onClick="openSelectHouse();" onFocus="this.blur()">
	               			<img  src="${ctx}/images/ico_houesno.GIF" alt="${key.charge_meterdata_byuser_hint_selectHouse}" border="0">
	               		</a>
	               		<span id="selectHouseImg" name="selectHouseImg"></span>
	               	</td>
	             </tr>
	           </table>
           </td>
            </tr>
          <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_ownerName}：</td>
            <td class="aux_intable_td2"><div id="ownerName"></div></td>
            </tr>

          <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_water_lastReading}：</td>
            <td class="aux_intable_td2"><div id="shui_showLastReading"></div></td>
          </tr>

          <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_water_thisReading}：</td>
            <td class="aux_intable_require">
	            <table border="0" cellspacing="0" cellpadding="0">
	              <tr>
	                <td >
	                	<input name="shui_thisReading"
	                		   onblur="thisShuiMeterHandle(this.value);"
	                		   type="text"
	                		   class="inputtext required integer-decimal-range-13-2 float-right"
	                		   afterInsert="shuiShow"
	                		   style="text-align:right"
	                		   value=""
	                		   size="16">${key.lifang}
	                	<span id="shuiShow"></span>
	                </td>
	                <td width="4">&nbsp;</td>
	                <td >&nbsp;</td>
	              </tr>
	            </table>
            </td>
          </tr>
		  <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_ammeter_lastReading}：</td>
            <td class="aux_intable_td2"><div id="dian_showLastReading"></div></td>
          </tr>
          <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_ammeter_thisReading}：</td>
            <td class="aux_intable_require">
	            <table border="0" cellspacing="0" cellpadding="0">
	              <tr>
	                <td >
	                	<input name="dian_thisReading"
	                		   type="text"
	                		   onblur="thisDianMeterHandle(this.value);"
	                		   class="inputtext  required required integer-decimal-range-13-2 float-right "
	                		   afterInsert="dianShow"
	                		   style="text-align:right"
	                		   value=""
	                		   size="16">${key.du}
	                	<span id="dianShow"></span>
	                </td>
	                <td width="4">&nbsp;</td>
	                <td >&nbsp;</td>
	              </tr>
	            </table>
            </td>
          </tr>

          <tr>
            <td class="aux_intable_td1">${key.charge_meterdata_byuser_recordDate}：</td>
            <td class="aux_intable_require">
	            <table border="0" cellspacing="0" cellpadding="0">
	              <tr>
	                <td >
	                		<input name="recordTime"
	                			   type="text"
	                			   class="inputtext required validate-date-yyyy-mm-dd validate-ajax"
	                			   replaceId="dataValue"
	                			   value="${sysDate}"
	                			   size="16"
	                			   validateUrl="${ctx}/common_sysrefcodeAction.do?method=compareCurrentDate&dateFormat=yyyy-MM-dd&compareType=smallEqualsCurrentDate"
	                			   validateMessage="${key.charge_meterdata_byuser_recordDate_lessSystem}"
	                			   afterInsert="imageButton"
	                			   maxlength="10"
	                			   >
	                </td>
	                <td width="4">&nbsp;</td>
	                <td ><img id="imageButton" src="${ctx}/images/ico_clock_month.gif" width="20" height="20"></td>
	              </tr>
	            </table>
            </td>
          </tr>
        </table>
        </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="left" class="window_footer">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="buttonOffLeft" id="btn1_41"></td>
              <td class="buttonOffMiddle" id="btn1_42" onClick="sumitAndNew();" onMouseOver="btn_change_over(4)" onMouseOut="btn_change_out(4)" onblur="btn_change(4)"><img src="${ctx}/images/ico_saveandnewfile.gif" alt="" width="14" height="14" border="0" align="absbottom">&nbsp;${key.saveAndAdd}</td>
              <td class="buttonOffRight" id="btn1_43"></td>
            </tr>
        </table></td>
        <td class="btn_between_space">&nbsp;</td>
        <td><table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="buttonOffLeft" id="btn1_21"></td>
              <td class="buttonOffMiddle" id="btn1_22" onClick="mysubmit();" onMouseOver="btn_change_over(2)" onMouseOut="btn_change_out(2)" onBlur="btn_change(2)"><img src="${ctx}/images/ico_ok.gif" alt="" width="14" height="14" border="0" align="absbottom">&nbsp;${key.save}</td>
              <td class="buttonOffRight" id="btn1_23"></td>
            </tr>
        </table></td>
        <td class="btn_between_space"></td>
        <td><table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="buttonOffLeft" id="btn1_31"></td>
              <td class="buttonOffMiddle" id="btn1_32" onClick="myWindowClose();" onMouseOver="btn_change_over(3)" onMouseOut="btn_change_out(3)" onBlur="btn_change(3)"><img src="${ctx}/images/ico_cancel.gif" alt="" width="14" height="14" border="0" align="absbottom">&nbsp;${key.close}</td>
              <td class="buttonOffRight" id="btn1_33"></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
 </form>
</table>
<script type="text/javascript">
              Calendar.setup(
              {
	              inputField : "recordTime", // ID of the input field
	              ifFormat : "%Y-%m-%d", // the date format
	              button : "imageButton", // ID of the button
	              align          :    "Tl",           // alignment (defaults to "Bl")
			      singleClick    :    true
              }
              );
</script>
</body>
</html>
